<template>

  <div style="margin:40px;">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="margin:0;font-size:18px;font-weight:bold;">{{ this.$route.meta.title }}</span>
        <el-button style="float: right; padding:3px 0" type="text" @click="cancelForm">返回列表</el-button>
      </div>
      <div style="max-width:100%;margin:auto;">
        <table class="table table-bordered th-bg">
          <thead>
          <tr>
            <th colspan="4">诉求详情
            </th>
          </tr>
          </thead>
          <tbody>
          <tr>
            <th width="200">诉求类型</th>
            <td>
              {{ form.demandTypeStr }}
            </td>
          </tr>
          <tr>
            <th width="200">企业名称</th>
            <td>
              {{ form.enterpriseName }}
            </td>
          </tr>
<!--          <tr>-->
<!--            <th width="200">诉求标题</th>-->
<!--            <td>{{ form.demandTitle }}</td>-->
<!--          </tr>-->
          <tr>
            <th width="200">诉求内容</th>
            <td>
              {{ form.demandContent }}
            </td>
          </tr>
          <tr>
            <th width="200">提交人</th>
            <td>
              {{ form.submitter }}
            </td>
          </tr>
          <tr>
            <th width="200">联系方式</th>
            <td>{{ form.contact }}</td>
          </tr>
          <tr>
            <th width="200">附件</th>
            <td >
              <el-image
                v-for="item in form.files" :key="item"
                :preview-src-list="['http://192.168.1.251:6050/sf_enterprise_service/data/upload/' + item]"
                style="width: 100px; height: 100px; margin-right:5px"
                :src="'http://192.168.1.251:6050/sf_enterprise_service/data/upload/' + item" >
              </el-image>
            </td>
          </tr>
          </tbody>
        </table>
        <table class="table table-bordered th-bg" v-if='(form.deptProcessStatus[0] && form.deptProcessStatus[0].demand_status == 2 && !form.admin) || form.admin && this.replay'>
          <thead>
          <tr>
            <th colspan="2">处理回复
            </th>
          </tr>
          </thead>
          <tbody>
          <tr>
            <td>回复</td>
            <td>
              <el-input
                  placeholder="请输入回复内容"
                  v-model="demandReply">
                </el-input>
            </td>
          </tr>
          <tr>
            <td>附件</td>
            <td>
              <el-upload
                :action="actionUrl"
                :on-success="uploadFiles"
                :on-remove="removeFiles"
              >
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>
            </td>
          </tr>
          </tbody>
        </table>
        <table class="table table-bordered th-bg" v-if='form.admin && !this.replay'>
          <thead>
          <tr>
            <th colspan="4">各部门处理情况
            </th>
          </tr>
          </thead>
          <tbody>
          <tr>
            <th>部门</th>
            <th>处理状态</th>
            <th>回复</th>
            <th>附件</th>
          </tr>
          <tr v-for="item in form.deptProcessStatus" :key="item.department">
            <td>{{ item.dept_name }}</td>
<!--            <td>{{item.demand_status == 2 ? '处理中' : '已完结'}}</td>-->
            <td>{{item.status_name}}</td>
            <td>{{item.reply}}</td>
            <td>
              <div style="color: #3a8ee6" v-for="item2 in item.attachments">
<!--                <a style="text-decoration: underline " target="_blank" :href="'http://192.168.1.251:6050/sf_enterprise_service/data/upload/' + item2.filePath">{{item2.fileName}}</a>-->
                                <a style="text-decoration: underline " target="_blank" :href="url + item2.filePath">{{item2.fileName}}</a>
              </div>
            </td>
          </tr>
          </tbody>
        </table>
        <table class="table table-bordered th-bg" v-if='!form.admin && form.deptProcessStatus[0].demand_status != 2'>
          <thead>
          <tr>
            <th colspan="3">处理回复
            </th>
          </tr>
          </thead>
          <tbody>
          <tr>
            <th>处理状态</th>
            <th>回复</th>
            <th>附件</th>
          </tr>
          <tr>
            <td >
              {{ form.deptProcessStatus[0].status_name}}
            </td>
            <td>
              {{form.deptProcessStatus[0].reply}}
            </td>
            <td>
              <div style="color: #3a8ee6" v-for="item in form.deptProcessStatus[0].attachments">
<!--                <a style="text-decoration: underline " target="_blank" :href="'http://192.168.1.251:6050/sf_enterprise_service/data/upload/' + item.filePath">{{item.fileName}}</a>-->
                <a style="text-decoration: underline " target="_blank" :href="url + item.filePath">{{item.fileName}}</a>
              </div>
            </td>
          </tr>
          </tbody>
        </table>
        <div style="display:flex; align-item: center; justify-content: center; margin-top:20px;">
           <el-button
              type="primary"
              size="small"
              @click="anser"
               v-if='form.admin && form.statusId == 2 && !this.replay'
            >
             完结
            </el-button>
          <el-button
            type="primary"
            size="small"
            @click="anser"
            v-if='(!form.admin && form.deptProcessStatus[0].demand_status == 2) || (form.admin && this.replay)'
          >
            处理
          </el-button>
            <el-button
              size="small"
              @click="cancelForm"
            >
              返回
            </el-button>
          </div>
      </div>
    </el-card>

  </div>
</template>

<script>
import crudLandlord from '@/api/business/demand'
import downOrPreview from '@/components/downOrPreview'
import AMap from '@/components/Amap'

export default {
  components: {
    downOrPreview, AMap
  },
  props: {},
  data() {
    return {
      actionUrl: '/sf_enterprise_service/business/file/upload',
      // url: window.location.href.split('#')[0] + 'sf_enterprise_service/data/upload/',
      url: '/sf_enterprise_service/data/upload/',
      // http://192.168.1.251:6050/sf_enterprise_service/data/upload/
      id: '',
      form: {},
      demandReply: '',
      list: [
        {
          department: '11',
          status: '1',
          remark: '1111111',
        }
      ],
      replayFiles: null,
      replay: false,
    }
  },

  created() {
    this.id = this.$route.query && this.$route.query.id;
    this.replay = this.$route.query && this.$route.query.replay;
    console.log(this.id, 'id')
    this.fetchData(this.id)
  },
  computed: {},
  methods: {
    uploadFiles(response, file, fileList) {
      console.log(response, file, fileList, 'upload')
      this.replayFiles = fileList
    },
    removeFiles(file, fileList) {
      console.log(file, fileList, 'remove')
      this.replayFiles = fileList
    },
    fetchData(id) {
      const fetchMethod = crudLandlord.get
      fetchMethod(id).then(response => {
        this.form = response.data;
        if (this.form.files.length) {
          this.form.files = this.form.files.split(',')
          console.log(this.form.files, 'split')
        }
        switch (this.form.demandType) {
          case 1:
            this.form.demandTypeStr = '要素保障'
            break
          case 2:
            this.form.demandTypeStr = '人力社保'
            break
          case 3:
            this.form.demandTypeStr = '安全生产'
            break
          case 4:
            this.form.demandTypeStr = '市场监督'
            break
          case 5:
            this.form.demandTypeStr = '政策咨询'
            break
          case 6:
            this.form.demandTypeStr = '融资贷款'
            break
          case 7:
            this.form.demandTypeStr = '市场销售'
            break
          case 8:
            this.form.demandTypeStr = '法律咨询'
            break
          case 9:
            this.form.demandTypeStr = '企业发展'
            break
          case 10:
            this.form.demandTypeStr = '其他'
            break
        }
      }).catch(err => {
        console.log(err)
      })
    },
    cancelForm() {
      this.$router.push('/business/landlord')
    },
    anser() {
      if (this.form.admin && !this.replay) {
        crudLandlord.finish(this.id).then(res => {
          console.log(res, 'res')
          if (res.msg === 'success') {
            this.$notify({
              title: '成功',
              message: '处理成功',
              type: 'success',
              duration: 2000
            })
            this.cancelForm()()
          }
        })
      } else {
        const form2 = {
          demandId: this.id,
          demandReply: this.demandReply
        }
        const attachmentIds = []
        if (this.replayFiles) {
          this.replayFiles.forEach(item => {
            attachmentIds.push(item.response.fileId)
          })
        }
        form2.attachmentIds = attachmentIds.join(',')
        console.log(attachmentIds, 'attachmentIds')
        // return
        crudLandlord.reply(form2).then(res => {
          console.log(res, 'res')
          if (res.msg === 'success') {
            this.$notify({
              title: '成功',
              message: '回复成功',
              type: 'success',
              duration: 2000
            })
            this.cancelForm()()
          }
        })
      }
    },
  },

}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .el-input-number .el-input__inner {
  text-align: left;
}

.amap-wrapper {
  width: 500px;
  height: 500px;
}

::v-deep .map-dialog .el-dialog__body {
  padding: 10px 20px;
}
</style>
